<template>
	<basic-layout v-loading="loading" :showVertical="false">
		<template v-slot:content-main>
			<div class="home-page">
				<!-- 中间二级标题 -->
				<!-- <div class="type-nav-container">
					<div v-for="item in navDatas" :key="item.value"
						:class="['type-nav-item', { active: item.value === filterType }]"
						@click="handleCheckoutWorkFilterType(item.value)">
						{{ item.name }}
					</div>
				</div> -->
				<!-- 中间下方小内容 -->
				<div class="work-container" v-if="groupList.length">
					<div v-for="item in groupList" :key="item.dictValue"
						class="work-groups">
						<div class="work-group-title">
							{{ item.dictLabel }}
						</div>
						<div class="work-list">
							<animate-card
								v-for="(work, index) in item.projects"
								:key="work.projectId"
								:index="index"
								:name="work.name"
								:image="work.coverUrl"
								:slug="work.projectId"
								@click="handleCheckoutWork(work.projectId)"
							/>
							<!-- '?x-oss-process=style/h200' -->
						</div>
					</div>
				</div>
			</div>
		</template>
		<template v-slot:content-side>
			<!-- 最右侧大图 -->
			<top-img-list></top-img-list>
		</template>
	</basic-layout>
</template>

<script>
import BasicLayoutBody from "@/components/layout/BasicLayoutBody";
import AnimateCard from "@/components/AnimateCard";
import TopImgList from "@/components/TopImgList";
import { getListGroup, getRouters } from '@/api';

export default {
	components: {
		'basic-layout': BasicLayoutBody,
		'animate-card': AnimateCard,
		TopImgList
	},
	data() {
		return {
			loading: true,
			filterType: '1',
			workCat: {},
			navDatas: [],
			groupList: [],
			groupType: {
				areaFlag: 'SET_AREA_GROUP',
				familyFlag: 'SET_FAMILY_GROUP',
				styleFlag: 'SET_STYLE_GROUP',
				typeFlag: 'SET_TYPE_GROUP',
				yearFlag: 'SET_YEAR_GROUP',
				cityFlag: 'SET_CITY_GROUP'
			}
		};
	},
	watch: {
		// 监听路由-左侧菜单跳转
		["$route"](newVal, oldVal) {
			console.log('wpc-', newVal, oldVal);
			if (newVal.path == '/works') {
				this.getGroup();
			}
		}
	},
	created() {
		this.getGroup();
	},
	methods: {
		getGroup() {
			const value = this.$route.query.cat_id || 'areaFlag';
			this.groupList = [];
			getListGroup({flagType: value}).then((res) => {
				if(res.code == 200) {
					this.groupList = [...res.data];
					this.$store.commit(this.groupType[value], [...res.data]);
				} else {
					this.$message.error(res.msg)
				}
			}).catch((err) => {
				
			});
		},
		handleCheckoutWorkFilterType(value) {
			console.log('三级菜单-', value);
			this.filterType = value;
		},
		handleCheckoutWork(slug) {
			let query = !this.$route.query.cat_id ? {cat_id: 'areaFlag'} : this.$route.query;
			this.$router.push({
				path: "works/detail",
				query: {...query, detail_id: slug}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.home-page {
	padding-left: 19px;
	.type-nav-item {
		display: inline-block;
		font-size: 16px;
		font-weight: 600;
		line-height: 22px;
		color: #717171;
		//border-bottom: 2px solid #fff;
		margin-right: 57px;
		z-index: 1;
		cursor: url(../../assets/icon/circle.svg) 15 15, auto;
		&.active {
			position: relative;
			color: #000;
		}
		&.active::before {
			position: absolute;
			content: "";
			left: -2px;
			width: 16px;
			height: 16px;
			display: inline-block;
			border-radius: 50%;
			background: #7ff226;
			mix-blend-mode: multiply;
		}
	}
	.work-container {
		margin-top: 5px;
		.work-groups {
			margin-bottom: 18px;
	
			.work-group-title {
				color: #131313;
				margin-bottom: 4px;
				font-size: 14px;
				font-weight: 600;
			}
			.work-list {
				font-size: 0;
			}
		}
	}
}
</style>